<template>
	<div class="main">
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/forgearea/top.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/forgearea/rank.png">
				</div>
			</div>
			<div>
				<div>
					<div @click="tab(1)" :class="type==1?'':'select'">
						<div>
							<img src="@/assets/images/wechat/student/ranklist/1.png">
						</div>
						<div>好友排行</div>
					</div>
					<div @click="tab(2)" :class="type==2?'':'select'">
						<div>
							<img src="@/assets/images/wechat/student/ranklist/1.png">
						</div>
						<div>世界排行</div>
					</div>
				</div>
				<div v-if="type==1">
					<div v-for="(item,index) in dataList" :key="index">
						<div>
							<div>
								<div>1</div>
								<div>
									<img src="@/assets/images/wechat/student/ranklist/avatar.png">
								</div>
								<div>昵称一</div>
							</div>
							<div>平民</div>
							<div>
								<div>
									<div>
										<img src="@/assets/images/wechat/student/ranklist/star.png">
									</div>
									<div>74351</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else>
					<div>
						<div>
							<div>
								<div>1</div>
								<div>
									<img src="@/assets/images/wechat/student/ranklist/avatar.png">
								</div>
								<div>昵称一2222222222222222</div>
							</div>
							<div>平民</div>
							<div>
								<div>
									<div>
										<img src="@/assets/images/wechat/student/ranklist/star.png">
									</div>
									<div>74351</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div>
							<div>
								<div>1</div>
								<div>
									<img src="@/assets/images/wechat/student/ranklist/avatar.png">
								</div>
								<div>昵称一</div>
							</div>
							<div>平民</div>
							<div>
								<div>
									<div>
										<img src="@/assets/images/wechat/student/ranklist/star.png">
									</div>
									<div>74351</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div>榜内为游戏好友，非微信好友、当前好友数10/150</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				type:1,
				dataList:[{},{},{},{},{},{},{}]
			}
		},
		created:async function() {
			
		},
		beforeMount: function() {
	
		},
		mounted: function() {
	
		},
		methods: {
			tab(type){
				this.type=type;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #670914;
		>div:nth-child(1){
			overflow: hidden;
			margin-top:34px;
			margin-left:16px;
			margin-right:16px;
			>div:nth-child(1){
				position: relative;
				>div:nth-child(1){
					width: 100%;
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					width: 100%;
					position: absolute;
					top:0;
					left:0;
					>img{
						width:100%;
					}
				}
			}
			>div:nth-child(2){
				margin-top:12px;
				background-color: #D1C7AE;
				overflow: hidden;
				border-radius: 10px;
				>div:nth-child(1){
					display:flex;
					justify-content: space-between;
					margin-left:15px;
					margin-right:15px;
					margin-top:11px;
					>div{
						width:48%;
						position: relative;
						>div:nth-child(1){
							>img{
								width:100%;
							}
						}
						>div:nth-child(2){
							position: absolute;
							left:0;
							right: 0;
							top:0;
							text-align: center;
							line-height: 45px;
							color:#FFFFFF;
							font-size:27px;
						}
					}
					>.select{
						width:48%;
						position: relative;
						opacity: 0.5;
						>div:nth-child(1){
							>img{
								width:100%;
							}
						}
						>div:nth-child(2){
							position: absolute;
							left:0;
							right: 0;
							top:0;
							text-align: center;
							line-height: 45px;
							color:#FFFFFF;
							font-size:27px;
						}
					}
				}
				>div:nth-child(2){
					margin-top:8px;
					margin-left:8px;
					margin-right:8px;
					>div{
						margin-top:2px;
						height:31px;
						background-color: #F7EFD3;
						border:1px solid #A69E8A;
						border-radius: 5px;
						>div{
							margin-left:8px;
							margin-right:8px;
							height:31px;
							display:flex;
							justify-content: space-between;
							align-items: center;
							>div:nth-child(1){
								display:flex;
								align-items: center;
								>div:nth-child(1){
									font-size: 14px;
									font-weight: 400;
									color: #FFFFFF;
								}
								>div:nth-child(2){
									width:24px;
									height:24px;
									>img{
										width:100%;
									}
									margin-left:6px;
									margin-right: 4px;
								}
								>div:nth-child(3){
									font-size: 12px;
									font-weight: 400;
									color: #3D777B;
									width: 80px;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
							>div:nth-child(2){
								font-size: 9px;
								font-weight: normal;
								color: #845214;
							}
							>div:nth-child(3){
								background-color: #539A7C;
								//width: 69px;
								border-radius: 5px;
								>div{
									margin-left:6px;
									margin-right:6px;
									display:flex;
									align-items: center;
									justify-content: space-between;
									>div:nth-child(2){
										font-size: 9px;
										font-weight: normal;
										color: #FFFFFF;
									}
								}
							}
						}
					}
				}
				>div:nth-child(3){
					margin-top:20px;
					margin-bottom: 15px;
					font-size: 12px;
					font-weight: normal;
					color: #9C774A;
					text-align: center;
				}
			}
		}		
	}
</style>
